<script lang="ts" setup name="XtxMessage">
	import { onMounted, PropType, ref } from 'vue'

	defineProps({
		type: {
			type: String as PropType<'success' | 'error' | 'warning'>,
			default: 'success',
		},
		text: {
			type: String,
			default: '',
		},
	})

	// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
	const style = {
		warning: {
			icon: 'icon-warning',
			color: '#E6A23C',
			backgroundColor: 'rgb(253, 246, 236)',
			borderColor: 'rgb(250, 236, 216)',
		},
		error: {
			icon: 'icon-shanchu',
			color: '#F56C6C',
			backgroundColor: 'rgb(254, 240, 240)',
			borderColor: 'rgb(253, 226, 226)',
		},
		success: {
			icon: 'icon-queren2',
			color: '#67C23A',
			backgroundColor: 'rgb(240, 249, 235)',
			borderColor: 'rgb(225, 243, 216)',
		},
	}

	// 用于Transition动画, 控制显示隐藏, 挂载时显示就会出现动画
	const show = ref(false)
	onMounted(() => {
		show.value = true
	})
</script>

<template>
	<!-- 用于Transition出现时的动画 -->
	<Transition name="down">
		<div class="xtx-message" :style="style[type]" v-if="show">
			<i class="iconfont" :class="style[type].icon"></i>
			<span class="text">{{ text }}</span>
		</div>
	</Transition>
</template>

<style scoped lang="less">
	.xtx-message {
		width: 300px;
		height: 50px;
		position: fixed;
		z-index: 9999;
		left: 50%;
		margin-left: -150px;
		top: 25px;
		line-height: 50px;
		padding: 0 25px;
		border: 1px solid #e4e4e4;
		background: #f5f5f5;
		color: #999;
		border-radius: 4px;
		i {
			margin-right: 4px;
			vertical-align: middle;
		}
		.text {
			vertical-align: middle;
		}
	}
	.down {
		&-enter {
			&-from {
				transform: translate3d(0, -75px, 0);
				opacity: 0;
			}
			&-active {
				transition: all 0.5s;
			}
			&-to {
				transform: none;
				opacity: 1;
			}
		}
	}
</style>
